<template>
  <div class="app">
    <router-view />
    <TabBar v-if="isShow" />
  </div>
</template>

<script lang="ts" setup>
// 导入底部组件
import TabBar from '@/TabBar/index.vue'
import useUserStore from './store/userInfo'
import { computed, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
const userStore = useUserStore()
const route = useRoute()

// 设置控制底部栏变化的变量
const isShow = ref(true)

// 要展示底部栏的路由
const isShowTab = computed(() => {
  return userStore.TabBarRoutes.filter((item) => {
    if (item.meta.isShow) {
      return item.path
    }
  })
})

// 监听路由的变化
watch(route, (n) => {
  const res = isShowTab.value.every((item) => item.path !== n.path)
  res ? (isShow.value = false) : (isShow.value = true)
})
</script>

<script lang="ts">
export default {
  name: 'App'
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
}
</style>
